<template>
  <BaseDialog
    width="800px"
    title="标签"
    :handleOk="handleLabelOk"
    :handleCancel="handleCancel"
    :dialogVisible="props.dialogVisible"
    :footer="true"
  >
    <div class="dialog__body">
      <div class="left">
        <div class="use_titile">选择标签</div>
        <div style="display: flex">
          <el-input
            v-model="filterText"
            placeholder="请输入标签名称"
          ></el-input>

          <el-button
            style="margin-left: 10px"
            type="primary"
            @click="filterNode(filterText)"
          >
            查询
          </el-button>
          <el-button
            @click="
              () => {
                filterText = ''
                filterNode('')
              }
            "
          >
            重置
          </el-button>
        </div>

        <el-scrollbar class="scrollBox" style="height: 350px; margin-top: 10px">
          <el-collapse v-model="activeName">
            <el-collapse-item
              v-for="item in cateListTree"
              :key="item.categoryId"
              :title="item.categoryName"
              :name="item.categoryId"
            >
              <div class="label-list">
                <div
                  @click="checkTag(tag, item)"
                  :class="tag.select ? 'item item-select' : 'item'"
                  v-for="tag in item.tagList"
                  :key="`tag-${tag.tagId}`"
                >
                  {{ tag.tagName }}
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-scrollbar>
      </div>
      <div class="right">
        <div class="use_titile">已选择</div>
        <el-scrollbar class="scrollBox" style="height: 400px">
          <div v-for="(n, i) in selectList" :key="i" class="selectList">
            <el-tag
              type="info"
              closable
              @close="handleClose(n)"
              style="margin-left: 5px; margin-top: 5px"
            >
              {{ n.tagName }}
            </el-tag>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </BaseDialog>
</template>

<script lang="ts" setup>
import { tagService } from '@/api/tag'
const props = defineProps({
  form: {
    type: Object,
  },
  bizId: {
    type: String,
  },
  dialogVisible: {
    type: Boolean,
  },
  data: {
    type: Array<any>,
    default: () => [],
  },
  keys: {
    type: String,
  },
  type: {
    type: String,
    default: '1',
  },
  handleCancel: {
    type: Function,
  },
  handleOk: {
    type: Function,
  },
})
console.log(props.data)

const model = ref([...props.data])
const labelString = ref('')
const length = ref(0)
const dialogVisible = ref(false)
const cateListTree = ref([])
const selectList = ref([])
const activeName = ref([])
const filterText = ref('')
const cateFilterListTree = ref([])
const filterNode = (val) => {
  /* cateListTree.value = cateFilterListTree.value.filter((e) => {
        return e.categoryName.includes(val)
    }) */
  let cate = []
  if (val) {
    cateFilterListTree.value.forEach((element) => {
      let list = element.tagList.filter((e) => {
        return e.tagName.includes(val)
      })
      if (list && list.length > 0) {
        cate.push({ ...element, tagList: list })
      }
    })
  } else {
    cate = cateFilterListTree.value
  }
  cateListTree.value = cate
  console.log('cateListTree', cate)
}

const selectLabel = () => {
  dialogVisible.value = true
  cateListTree.value = []
  cateFilterListTree.value = []
  tagService
    .categoryAndTagTree({ data: { type: props.type, bizId: props.bizId } })
    .then((res) => {
      res.data.forEach((cate) => {
        activeName.value.push(cate.categoryId)
        if (cate.tagList) {
          cate.tagList.forEach((tag) => {
            if (props.bizId) {
              if (tag.select) {
                model.value.push(tag)
              }
            } else if (model.value.find((n) => n.tagId == tag.tagId)) {
              tag.select = true
            }
          })
        }
      })
      cateListTree.value = res.data
      cateFilterListTree.value = res.data
      selectList.value = [...model.value]
    })
}
const handleCancel = () => {
  emit('update:dialogVisible', false)
}
const handleClose = (e) => {
  selectList.value = selectList.value.filter((x) => x.tagId !== e.tagId)
  cateListTree.value.forEach((element) => {
    if (element.tagList) {
      element.tagList.forEach((tag) => {
        if (tag.tagId == e.tagId) {
          tag.select = false
        }
      })
    }
  })
  cateFilterListTree.value.forEach((element) => {
    if (element.tagList) {
      element.tagList.forEach((tag) => {
        if (tag.tagId == e.tagId) {
          tag.select = false
        }
      })
    }
  })
}
const checkTag = (e, parent) => {
  if (e.select) {
    e.select = false
  } else {
    /* 判断是单选还是多选 */

    if (parent.nature == 1) {
      parent.tagList.forEach((element) => {
        element.select = false
      })
    }
    e.select = true
  }
  changeRight()
}
const changeRight = () => {
  let list = []
  cateFilterListTree.value.forEach((element) => {
    element.tagList.forEach((tag) => {
      if (tag.select) {
        list.push(tag)
      }
    })
  })
  selectList.value = list
}
const emit = defineEmits(['update:form', 'update:dialogVisible'])
const handleLabelOk = () => {
  props.handleOk(selectList.value)
}
onMounted(() => {
  selectLabel()
})
</script>

<style lang="less" scoped>
.dialog__body {
  display: flex;

  .left {
    width: 520px;
    padding-right: 20px;

    .label-list {
      display: flex;
      flex-wrap: wrap;
      .item {
        margin: 5px;
        padding: 2px 10px;
        //border-radius: 4px;
        border: 1px solid #dcdfe6;
        color: #909399;
        cursor: pointer;
      }

      .item-select {
        border: 1px solid #1abc9c;
        color: #1abc9c;
      }
    }
  }

  .right {
    flex: 1;
    border-left: 1px solid #ccc;
    padding-left: 10px;
  }
}
</style>
